<template>
  <div>
<van-row>
  <van-col span="4">
     <van-sidebar v-model="activeKey">
      <van-sidebar-item title="热门推荐" />
      <van-sidebar-item title="手机数码" />
      <van-sidebar-item title="京东超市" />
      <van-sidebar-item title="家用电器" />
      <van-sidebar-item title="电脑办公" />
      <van-sidebar-item title="玩具乐器" />
      <van-sidebar-item title="家具厨具" />
      <van-sidebar-item title="家居家装" />
      <van-sidebar-item title="男鞋" />
      <van-sidebar-item title="男装" />
      <van-sidebar-item title="女装" />
    </van-sidebar>
  </van-col>
  <van-col span="10" offset="2">
    <p class="ttt">热门分类</p>
    <div>
        <ul>
            <li v-for="(v,index) in arr" :key="index">
                <img :src="v.src" alt="">
                <p>{{v.name}}</p>
            </li>
        </ul>
    </div>
  </van-col>
</van-row>
  </div>
</template>

<script>
export default {
    data(){
        return{
            arr:[
                {
                    src:"	https://img11.360buyimg.com/focus/s140x140_jfs/t1/117080/5/10502/18158/5ef0103eE416ae569/898a7ac882ba6c63.jpg0103eE416ae569/898a7ac882ba6c63.jpg",
                  name:"空调"  
                },
                 {
                    src:"https://img10.360buyimg.com/focus/s140x140_jfs/t1/119891/13/5448/24096/5ef01048E096cfd33/260803efca5e8a73.jpg",
                  name:"冰箱"  
                },
                  {
                    src:"https://img12.360buyimg.com/focus/s140x140_jfs/t1/131424/31/274/19042/5ecb3bc2E96ef8448/0188085e6fd6cd12.png",
                  name:"电脑"  
                },
                 {
                    src:"https://img14.360buyimg.com/focus/s140x140_jfs/t27136/183/1628977274/31007/a6f7ed55/5be6ebd8Nb07ef492.png",
                  name:"手机"  
                },
                  {
                    src:"https://img20.360buyimg.com/focus/s140x140_jfs/t1/86638/37/11918/19572/5e3e4307E7606f742/0210ac72c0d9275e.jpg",
                  name:"全面屏手机"  
                },
                 {
                    src:"https://img30.360buyimg.com/focus/s140x140_jfs/t1/134182/23/366/16758/5eccb3caE2b8d0c6d/7ab40f9d9441a2a5.jpg",
                  name:"保健品"  
                },
                  {
                    src:"https://img20.360buyimg.com/focus/s140x140_jfs/t1/102972/19/11837/14987/5e3d8bdaEc8ffe21e/6119d3f773fcdacd.jpg",
                  name:"游戏手机"  
                },
                 {
                    src:"https://img14.360buyimg.com/focus/s140x140_jfs/t1/114862/21/8081/13361/5ecb398fEc7c98869/4b4101d0acbf4ced.jpg",
                  name:"口罩"  
                },
                 {
                    src:"https://img13.360buyimg.com/focus/s140x140_jfs/t1/136893/38/305/31308/5ecb84dcE410bc59a/36568e70a84f8807.jpg",
                  name:"驱蚊用品"  
                },
                  {
                    src:"https://img10.360buyimg.com/focus/s140x140_jfs/t1/111738/8/8168/9785/5ecb40ccE19924aec/1a1a91827d0f07ba.jpg",
                  name:"电磁炉"  
                },
                 {
                    src:"https://img10.360buyimg.com/focus/s140x140_jfs/t1/111738/8/8168/9785/5ecb40ccE19924aec/1a1a91827d0f07ba.jpg",
                  name:"电热水壶"  
                },
                  {
                    src:"https://img11.360buyimg.com/focus/s140x140_jfs/t1/113143/20/8135/9835/5ecb81ccE22407538/e9a80b7af28e83a6.jpg",
                  name:"数据线"  
                },
                 {
                    src:"https://img14.360buyimg.com/focus/s140x140_jfs/t1/131006/3/360/19831/5eccb047E2e95a92e/b425dc4923a20c15.jpg",
                  name:"图书"  
                },
                  {
                    src:"https://img12.360buyimg.com/focus/s140x140_jfs/t1/116006/32/8107/3290/5ecb3fb1Eaf924484/552f5b1d08d42fee.jpg",
                  name:"美妆护肤"  
                },
                 {
                    src:"https://img20.360buyimg.com/focus/s140x140_jfs/t1/104017/10/11956/27906/5e3e8936E54437217/e5905d3b63d5f6fb.jpg",
                  name:"除菌液"  
                },
            ]
        }
    }
}
</script>

<style scoped>
ul{
    display: flex;
    width:17rem ;
    flex-wrap: wrap;
    justify-content: space-around;
}
img{
    width: 5rem;
}
p{
    font-size: .75rem;
    text-align: center;
}
.ttt{
  margin-left:-70px
}
</style>